<template>
    <div>
        <!--<div>-->
            <!--<h1>首页</h1>-->
            <!--{{ count }}-->
            <!--<button type="button" @click="handleIncrement">+5</button>-->
            <!--<button type="button" @click="handleDecrement">-5</button>-->
        <!--</div>-->
        <!--<router-link to="/about">跳转到about</router-link>-->
        <!--<router-view></router-view>-->

        <!--<div>-->
            <!--{{ list }}-->
            <!--{{ listCount }}-->
        <!--</div>-->


        <!--使用action来修改数据-->
        <!--<div>-->
            <!--{{count}}-->
            <!--<button type="button" @click="handleActionIncrement">+1</button>-->
        <!--</div>-->

        <!--使用actions来异步提交数据，使用Promise-->
        <!--<div>-->
            <!--{{count}}-->
            <!--<button type="button" @click="handleAsyncIncrement">+1</button>-->
        <!--</div>-->

        <!--使用actions来异步提交数据，使用普通回调-->
        <!--<div>-->
            <!--{{count}}-->
            <!--<button type="button" @click="handleAsyncIncrement">+1</button>-->
        <!--</div>-->

        <!--使用vue-bus插件-->
        <h2>随机增加</h2>
        <Counter :number="number"></Counter>
    </div>
</template>

<script>
    //使用vue-bus插件
    import Counter from './router/views/Counter.vue';
    export default {
        components: {
            Counter
        },
        data () {
            return {
                number: 0
            }
        },
        created () {
            this.$bus.on('add',num =>{
                this.number +=num;
            });
        },
        beforeDestroy () {
            this.$bus.off('add',this.handleAddRandom);
        }
    }


    // export default {
    //     computed: {
    //         count () {
    //             return this.$store.state.count;
    //         }
    //     },
    //     //第一种方法
    //     // methods: {
    //     //     handleIncrement () {
    //     //         this.$store.commit('increment',5);
    //     //     },
    //     //     handleDecrement () {
    //     //         this.$store.commit('decrement',5);
    //     //     }
    //     // }
    //
    //     //第二种方法
    //     methods: {
    //         handleIncrement () {
    //             this.$store.commit({
    //                 type: 'increment',
    //                 count: 5
    //             });
    //         },
    //         handleDecrement () {
    //             this.$store.commit({
    //                 type: 'decrement',
    //                 count: 5
    //             });
    //         }
    //     }
    // }


    // export default {
    //     computed: {
    //         list () {
    //             return this.$store.state.list.filter(item => item<10);
    //         }
    //     }
    // }

    //使用getters改写
    // export default {
    //     computed: {
    //         list () {
    //             return this.$store.getters.filteredList;
    //         }
    //     }
    // }


    //使用getter计算出list过滤后的元素的数量
    // export default {
    //     computed: {
    //         list () {
    //             return this.$store.getters.filteredList;
    //         },
    //         listCount () {
    //             return this.$store.getters.listCount;
    //         }
    //     }
    // };


    //使用action来修改数据
    // export default {
    //     computed: {
    //         count () {
    //             return this.$store.state.count;
    //         }
    //     },
    //     methods: {
    //         handleActionIncrement () {
    //             this.$store.dispatch('increment');
    //         }
    //     }
    // }


    //使用actions来异步提交数据，使用Promise
    // export default {
    //     computed: {
    //         count () {
    //             return this.$store.state.count;
    //         }
    //     },
    //     methods: {
    //         handleAsyncIncrement () {
    //             this.$store.dispatch('asyncIncrement').then(
    //                 ()=>{
    //                     console.log(this.$store.state.count)
    //                 }
    //             );
    //         }
    //     }
    // }


    //使用actions来异步提交数据,使用普通回调
    // export default {
    //     computed: {
    //         count () {
    //             return this.$store.state.count;
    //         }
    //     },
    //     methods: {
    //         handleAsyncIncrement () {
    //             this.$store.dispatch('asyncIncrement',()=>{
    //                 console.log(this.$store.state.count);
    //             })
    //         }
    //     }
    // }


    // const promise = new Promise((resolve,reject)=>{
    //         setTimeout(()=>{
    //             const random = Math.random();
    //             if(random>0.5){
    //                 resolve(random);
    //             }else{
    //                 reject(random);
    //             }
    //         },1000)
    //     });
    // promise.then((value)=>{
    //     console.log('success',value);
    // }).catch((error)=>{
    //     console.log('fail',error);
    // });
</script>

<style scoped>

</style>
